<template>
  <Head>
    <Title>Mentors</Title>
  </Head>
  <PageHeader title="Mentors" subtitle="Mentors" :image="`${$config.public.baseUrl}images/bg/home1/6.png`"/>
  <section class="team team--style1 padding-top padding-bottom">
    <div class="container" data-aos="fade-up" data-aos-duration="800">
      <div class="section-header text-center">
        <h2>Meet the Expert Mentors</h2>
      </div>
      <div class="team__wrapper">
        <Pagination :dataList="mentors" :paginate="12">
          <template #content="{ list }">
            <div class="row g-4">
              <div
                v-for="(itm, idx) in list"
                :key="idx"
                class="col-lg-3 col-sm-6"
              >
                <div class="team__item">
                  <div class="team__item-inner">
                    <div class="team__item-thumb">
                      <img :src="itm.avatar" alt="Team Image" />
                    </div>
                    <div class="team__item-content team__item-content--style1">
                      <div class="team__item-author">
                        <h6>
                          <nuxt-link to="/mentor-details">{{
                            itm.name
                          }}</nuxt-link>
                        </h6>
                        <p>{{ itm.role }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template #button="{ paginationButtons, updateCurrent, current }">
            <div class="paginations">
              <ul class="lab-ul d-flex flex-wrap justify-content-center mb-1">
                <li>
                  <a
                    href="javascript:void(0);"
                    @click="updateCurrent(current - 1 || 1)"
                    ><i class="fa-solid fa-arrow-left"></i
                  ></a>
                </li>
                <li v-for="item in paginationButtons" :key="item">
                  <a
                    href="javascript:void(0);"
                    :class="{ active: current === item }"
                    @click="updateCurrent(item)"
                  >
                    {{ item }}
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:void(0);"
                    @click="
                      updateCurrent(
                        paginationButtons > current
                          ? current + 1
                          : paginationButtons
                      )
                    "
                    ><i class="fa-solid fa-arrow-right"></i
                  ></a>
                </li>
              </ul>
            </div>
          </template>
        </Pagination>
      </div>
    </div>
  </section>
  <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
    <div class="container">
      <Newsletter />
    </div>
  </div>
</template>

<script>
import PageHeader from "@/components/partials/PageHeader.vue";
import Pagination from "@/components/base/slots/Pagination.vue";
import Newsletter from "@/components/partials/newsletters/Newsletter.vue";

export default {
  components: { PageHeader, Pagination, Newsletter },
  async setup() {
    const { axios } = fetchData();
    const mentor = await axios.get("/mentor.json");
    const mentors = mentor.data.mentors;
    return {
      mentors,
    };
  },
};
</script>

<style></style>